<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.ad{				
	            width: 500px;
	            height: 200px;
	            overflow: hidden;
	            position: relative;       
			}
			.ad .imgs{
				position: absolute;
	            left: 0;
	            top: 0px;
	            width: 3000px;
			}
			.imgs li{
				width: 500px;
	            height: 200px;
	            overflow: hidden;
	            float: left;
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
			}
			.ad .dots{
				z-index: 1;
				/*list-style: circle;*/
				height: 20px;
				position: absolute;
				bottom: 0;
				right: 0;
			}
			.ad .dots li{
				width: 15px;
				height: 15px;
				border: 2px solid white;
				line-height: 15px;
				margin-left: 5px;
				border-radius: 50%;
				text-align: center;
				align-content: center;
				
			}
			
		</style>
		
	</head>
	<body>
		
      <div class="ad">
          <ul id="imgs" class="imgs">
              <li data='0'><img src="img/wf1.jpg" width="500" height="200"/></li>
              <li data='1'><img src="img/wf2.jpg" width="500" height="200"/></li>
              <li data='2'><img src="img/wf3.jpg" width="500" height="200"/></li>
              <li data='3'><img src="img/wf4.jpg" width="500" height="200"/></li>
              <li data='4'><img src="img/wf5.jpg" width="500" height="200"/></li>
          </ul>
          <ul id="dots" class="dots">
          	<li data='0' class="dot"style="background-color: white;"></li>
          	<li data='1' class="dot"></li>
          	<li data='2' class="dot"></li>
          	<li data='3' class="dot"></li>
          	<li data='4' class="dot"></li>
          </ul>
      </div>
      <!--<div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>-->
    
   
	<script type="text/javascript">
//		setInterval(function(){
////			向父元素添加最后一个子元素
//			var ul=document.getElementById('imgs');
//			var li=ul.firstChild;
//			ul.appendChild(li);
//		},1000);

//		自动切换
//		var num=0;
//		setInterval(function(){
//			num++;
//			var ul=document.getElementById('imgs');
//			var lis=ul.children;
//			
//		    for(var i=0;i<lis.length;i++){
//		    	lis[i].style.display='none';
//		    }
//		    
//		    if(num==lis.length){
//		    	num=0;
//		    }
//		    lis[num].style.display='block';
//			
//		},1000)
		
//		var dot_lis=document.getElementById('dots').children;
////		for(var i=0;i<dot_lis.length;i++){
////			dot_lis[i].setAttribute('data1',i);
////		}
//		for(var i=0;i<dot_lis.length;i++){
//			dot_lis[i].onmouseover=function(){
//				var img_lis=document.getElementById('imgs').children;
//				for(var j=0;j<img_lis.length;j++){
//					img_lis[j].style.display='none';
//					dot_lis[j].style.backgroundColor='';
//				}
//				this.style.backgroundColor='white';
//				var index=this.getAttribute('data');
//				img_lis[index].style.display='block';
//			}
//		}
	</script>
	<script type="text/javascript">
		function change(n){
			var img_lis=document.getElementById('imgs').children;
			var dot_lis=document.getElementById('dots').children;
			for(var i=0;i<dot_lis.length;i++){
				img_lis[i].style.display='none';
				dot_lis[i].style.backgroundColor='';
			}
			img_lis[n].style.display='block';
			dot_lis[n].style.backgroundColor='white';
			
		}
		var num=0;
//		var timer=setInterval(function(){
//			var img_lis=document.getElementById('imgs').children;
//			num++;
//			if(num==img_lis.length){
//				num=0;
//			}
//			change(num);
//		},1000)
		var timer;
		function settimer(){
			timer=setInterval(function(){
					var img_lis=document.getElementById('imgs').children;
					num++;
					if(num==img_lis.length){
						num=0;
					}
					change(num);
			},1000)
		}
		settimer()
		var dot_lis=document.getElementById('dots').children;
		for(var i=0;i<dot_lis.length;i++){
			(function(i){
				dot_lis[i].onmouseover=function(){
					clearInterval(timer);
					change(i);
					num=i;
					
				}
				dot_lis[i].onmouseout=function(){
					settimer();
				}
			})(i)
			
		}
	</script>
	</body>
</html>
